<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>menu</title>
		<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/public.css" media="all">
		<style>
			.layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
				height: 34px;
				line-height: 34px;
				padding: 0 8px;
			}
		</style>
		<script src="js/global.js" charset="utf-8"></script>
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<blockquote class="layui-elem-quote">
					小凡树形表格
				</blockquote>
				<div>
					<div class="layui-btn-group">
						<button class="layui-btn" id="btn-expand">全部展开</button>
						<button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
						<button class="layui-btn layui-btn-normal ops" ops="module:addOne"
							id="btn-addOne">添加一级节点</button>
					</div>
					<table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
				</div>
			</div>
		</div>
		<!-- 新增一级节点 -->
		<div id="addOneLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="addForm" id="addForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red">*</span>权限名称:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="name" name="name" class="layui-input" lay-verify="required">
						<input type="hidden" name="parentId" value="-1" class="layui-input"><!-- 设置添加隐藏域，默认父id=1 -->
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">权限标识:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="ops" name="ops" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">菜单url</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="path" name="path" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分类:</label>
					<div class="layui-input-inline" style="width: 200px;">
						<select name="type">
							<option value="m">菜单</option>
							<option value="b">按钮</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">排序权重:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="weight" name="weight" class="layui-input" lay-verify="number">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">图标</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="icon" name="icon" class="layui-input">
						<br />
						<a href="https://fontawesome.dashgame.com/" target="_blank"
							style="color: red;">请点击我图标请在浏览器中添加,添加格式为fa xxxx</a>
					</div>

				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="addSubmit" lay-submit="">新增提交</button>
				</div>
			</form>
		</div>
		<!-- 新增子节点 -->
		<div id="addSonLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="addSonForm" id="addSonForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red">*</span>权限名称:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="name" name="name" class="layui-input" lay-verify="required">
						<input type="hidden" id="parentId" name="parentId" class="layui-input">
						<!-- 设置添加隐藏域，父id为当前数据的id -->
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">权限标识:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="ops" name="ops" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">菜单url</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="path" name="path" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分类:</label>
					<div class="layui-input-inline" style="width: 200px;">
						<select name="type">
							<option value="m">菜单</option>
							<option value="b">按钮</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">排序权重:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="weight" name="weight" class="layui-input" lay-verify="number">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">图标</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="icon" name="icon" class="layui-input">
						<br />
						<a href="https://fontawesome.dashgame.com/" target="_blank"
							style="color: red;">请点击我图标请在浏览器中添加,添加格式为fa xxxx</a>
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="addSonSubmit" lay-submit="">新增提交</button>
				</div>
			</form>
		</div>
		<!-- 修改的弹层页面  -->
		<div id="editLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editForm" id="editForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red">*</span>权限名称:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="name" name="name" class="layui-input" lay-verify="required">
						<input type="hidden" id="id" name="id" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">权限标识:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="ops" name="ops" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">菜单url</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="path" name="path" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">分类:</label>
					<div class="layui-input-inline" style="width: 200px;">
						<select name="type">
							<option value="m">菜单</option>
							<option value="b">按钮</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">排序权重:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="weight" name="weight" class="layui-input" lay-verify="number">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">图标</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="icon" name="icon" class="layui-input">
						<br />
						<a href="https://fontawesome.dashgame.com/" target="_blank"
							style="color: red;">请点击我图标请在浏览器中添加,添加格式为fa xxxx</a>
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改提交</button>
				</div>
			</form>
		</div>
		<!--定义数据表格table  -->
		<table class="layui-hide" id="munu-table" lay-filter="filterTable"></table>
		<!-- 操作列 -->
		<script type="text/html" id="auth-state">
			<a class="layui-btn layui-btn-primary layui-btn-xs ops" ops="module:addSon" lay-event="addSon">添加子节点</a>
			<a class="layui-btn layui-btn-primary layui-btn-xs ops" ops="module:edit" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs ops" ops="module:del" lay-event="del">删除</a>
		</script>

		<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script>
			layui.use(['table', 'treetable', 'laydate', 'layer', 'form', 'tree', 'upload', 'transfer'], function() {
				var $ = layui.jquery;
				var table = layui.table;
				var treetable = layui.treetable;
				var laydate = layui.laydate //日期组件
					,
					layer = layui.layer //弹层组件
					,
					form = layui.form //表单组件
					,
					upload = layui.upload //上传组件
					,
					tree = layui.tree //树形结构组件
					,
					$ = layui.jquery //jQuery
			,
					transfer = layui.transfer; //穿梭框组件

				// 渲染表格
				var renderTable = function() {
					layer.load(2);
					treetable.render({
						treeColIndex: 1,
						treeSpid: -1,
						treeIdName: 'id',
						treePidName: 'parentId',
						elem: '#munu-table',
						method: 'get',
						url: globalData.server + 'modules?token=' + globalData.token,
						page: false,
						cols: [
							[
								//{type: 'numbers'},
								{
									field: 'id',
									minWidth: 40,
									title: 'ID'
								},
								{
									field: 'name',
									minWidth: 300,
									title: '权限名称'
								},
								{
									field: 'ops',
									minWidth: 200,
									title: '权限标识'
								},
								{
									field: 'path',
									minWidth: 200,
									title: '菜单url'
								},
								{
				   		            field: 'type',
									width: 80,
									align: 'center',
									templet: function(d) {
										if (d.type == ("m")) {
											return '<span class="layui-badge layui-bg-blue">菜单</span>';
										} else {
											return '<span class="layui-badge-rim">按钮</span>';
										}
									},
									title: '类型'
								},
								{
									minWidth: 100,
									field: 'icon',
									title: '图标'
								},
								{
									field: 'weight',
									width: 100,
									align: 'center',
									title: '排序权重'
								},
								{
									templet: '#auth-state',
									width: 300,
									align: 'center',
									title: '操作'
								}
							]
						],
						done: function(res, curr, count) {
							layer.closeAll('loading');
							var myOps = sessionStorage.getItem("buttonPermission");
							$(".ops").each(function() {
								if (myOps.indexOf($(this).attr('ops')) == -1) {
									$(this).hide();
								}
							});
						}
					});
				};
				renderTable();

				$('#btn-expand').click(function() {
					treetable.expandAll('#munu-table');
				});

				$('#btn-fold').click(function() {
					treetable.foldAll('#munu-table');
				});
				$('#btn-addOne').click(function() {
					//打开一级节点弹层
					layer.open({
						type: 1,
						title: '您正在新增一级节点信息',
						content: $('#addOneLayer'),
						area: ['80%', '80%']
					});
				});

				//监听工具条
				table.on('tool(munu-table)', function(obj) {
					var data = obj.data;
					var layEvent = obj.event;

					if (layEvent === 'del') {
						//执行删除
						layer.confirm('真的删除行么', function(index) {
							//点击确定按钮的时候才会进来
							var id = data.id;
							var parentId = data.id;
							//在删除前先查找该类型下是否有子类型链接，如有就不让删除
							$.post(globalData.server + "modules/IsHaveSon?id=" + id + "&token=" +
								globalData.token, {},
								function(res) {
									if (res) { //商品类型下有子商品类型链接就提示不能删除
										layer.msg("该类型下有子类型连接，无法直接删除！");
									} else { //没有内容就可进一般判断
										$.post(globalData.server +
											"modules/selectIsHaveModules?id=" + id + "&token=" +
											globalData.token, {},
											function(res) {
												if (res) { //为true说明该类型下有商品提示不能删除
													layer.msg("该模块被分配，不能直接删除！");
												} else { //类型下没有商品链接就可进行删除
													$.post(globalData.server +
														"modules/delModulesById?id=" + id +
														"&token=" + globalData.token, {},
														function(res) {
															if (res) {
																layer.msg("删除成功");
																$("#btnReload").click();
																layer.closeAll('page');
																//刷新表格
																//treetable.reload('munu-table');
																//window.parent.location.reload(); //刷新页面
																renderTable(); ////刷新表格
															} else {
																layer.msg("删除失败");
																$("#btnReload").click();
																layer.closeAll('page');
															}
														}, 'json');
												}

											});
									}

								});

						});
					} else if (layEvent === 'edit') {
						//layer.msg('修改' + data.id);
						//打开修改的弹层
						//数据的回显
						form.val("editForm", data);
						//打开弹层
						layer.open({
							type: 1,
							title: '您正在修改编号【' + data.id + '】的节点信息',
							content: $('#editLayer'),
							area: ['800px', '600px']
						});
					} else if (layEvent === 'addSon') {
						$("#addSonForm")[0].reset();
						//把id放入父id的隐藏域
						$("#parentId").val(data.id)
						//打开添加子节点的弹层
						layer.open({
							type: 1,
							title: '您正在新增【' + data.id + '】子节点信息',
							content: $('#addSonLayer'),
							area: ['800px', '600px']
						});
					}
				});



				//新增一级节点弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: globalData.server + 'modules/insertMoules', //提交路径
						data: $("#addForm").serialize() /* +"&token="+globalData.token */ , //参数
						headers: {
							token: globalData.token
						},
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert(res.msg); //提示信息
							//table.reload('munu-table'); 	// 修改后要刷新表格
							//window.location.reload() //刷新页面//
							renderTable(); ////刷新表格

						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});

				//新增子节点弹层的提交按钮
				form.on('submit(addSonSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: globalData.server + 'modules/insertMoules', //提交路径
						data: $("#addSonForm").serialize() /* +"&token="+globalData.token */ , //参数
						headers: {
							token: globalData.token
						},
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert(res.msg);
							renderTable(); ////刷新表格
							//table.reload('munu-table'); 	// 修改后要刷新表格
							//window.location.reload() //刷新页面
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});

				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: globalData.server + 'modules/updateModules', //提交路径
						data: $("#editForm").serialize() /* +"&token="+globalData.token */ , //参数
						headers: {
							token: globalData.token
						},
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert(res.msg); //提示信息
							//table.reload('munu-table'); 	//刷新表格
							//window.location.reload() //刷新页面
							renderTable(); //刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});
					return false;
				});

			});
		</script>
	</body>
</html>
